<script setup lang="ts">
import { ref } from 'vue'
import type { SpuData } from '@/apis/product/spu/type'
import type { SkuData } from '@/apis/product/sku/type'
import { addSkuInfoService } from '@/apis/product/sku'
import { getAttrListService } from '@/apis/product/attr'
import { getSpuImageService, getAttrSaleService } from '@/apis/product/spu'
import type { AttrResponseData, Attr } from '@/apis/product/attr/type'
import type {
  SpuImageResponseData,
  SpuImage,
  SaleAttrResponseData,
  SaleAttr
} from '@/apis/product/spu/type'
// 初始化数据
const sceneValue = defineModel('sceneValue')
const attr = ref<Attr[]>([])
const spuImage = ref<SpuImage[]>([])
const saleAttr = ref<SaleAttr[]>([])
// 初始化参数
const skuParams = ref<SkuData>({
  category3Id: '',
  skuName: '',
  price: '',
  skuDefaultImg: '',
  skuDesc: '',
  spuId: '',
  tmId: '',
  weight: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: []
})
// 初始化
const formRef = ref()
const initSkuData = async (
  category1Id: number | string,
  category2Id: number | string,
  row: SpuData
) => {
  // 平台属性
  const res1: AttrResponseData = await getAttrListService(
    category1Id,
    category2Id,
    row.category3Id
  )
  // 图片墙
  const res2: SpuImageResponseData = await getSpuImageService(row.id!)
  // 销售属性
  const res3: SaleAttrResponseData = await getAttrSaleService(row.id!)

  attr.value = res1.data
  spuImage.value = res2.data
  saleAttr.value = res3.data
  // 初始化SkuParams
  Object.assign(skuParams.value, {
    category3Id: '',
    skuName: '',
    price: '',
    skuDefaultImg: '',
    skuDesc: '',
    spuId: '',
    tmId: '',
    weight: '',
    skuAttrValueList: [],
    skuSaleAttrValueList: []
  })
  skuParams.value.category3Id = row.category3Id
  skuParams.value.spuId = row.id!
  skuParams.value.tmId = row.tmId
}
// 绑定table
const tableRef = ref()
// 设置默认图片
const setImgDefault = (row: SpuImage) => {
  skuParams.value.skuDefaultImg = row.imgUrl!
  tableRef.value.clearSelection()
  tableRef.value.toggleRowSelection(row, true)
}

// 添加sku
const addSkuInfo = async () => {
  //  整理数据
  skuParams.value.skuAttrValueList = attr.value.reduce(
    (prev: any, next: any) => {
      if (next.attrIdValueId) {
        const [attrId, valueId] = next.attrIdValueId.split(':')
        prev.push({
          attrId,
          valueId
        })
      }
      return prev
    },
    []
  )
  skuParams.value.skuSaleAttrValueList = saleAttr.value.reduce(
    (prev: any, next: any) => {
      if (next.saleAttrIdValueId) {
        const [id, saleAttrValueId] = next.saleAttrIdValueId.split(':')
        prev.push({
          id,
          saleAttrValueId
        })
      }
      return prev
    },
    []
  )
  console.log(skuParams.value)
  // 发送请求
  await addSkuInfoService(skuParams.value)
  ElMessage.success('添加成功')
  sceneValue.value = 1
}

defineExpose({
  initSkuData
})
</script>

<template>
  <el-form ref="formRef" label-width="100px">
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="skuParams.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        placeholder="价格(元)"
        type="number"
        v-model="skuParams.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量（克）">
      <el-input
        placeholder="重量（克）"
        type="number"
        v-model="skuParams.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        type="textarea"
        placeholder="SKU描述"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="100px">
        <el-form-item
          v-for="item in attr"
          :key="item.id"
          :label="item.attrName"
          style="width: 300px; margin-bottom: 10px"
        >
          <el-select v-model="item.attrIdValueId">
            <el-option
              v-for="attrValue in item.attrValueList"
              :key="attrValue.id"
              :label="attrValue.valueName"
              :value="`${item.id}:${attrValue.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form inline label-width="50px">
        <el-form-item
          :label="item.saleAttrName"
          v-for="item in saleAttr"
          :key="item.id"
          style="width: 300px"
        >
          <el-select v-model="item.saleAttrIdValueId">
            <el-option
              v-for="saleAttrValue in item.spuSaleAttrValueList"
              :key="saleAttrValue.id"
              :label="saleAttrValue.saleAttrValueName"
              :value="`${item.id}:${saleAttrValue.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="spuImage" ref="tableRef">
        <el-table-column
          width="80px"
          align="center"
          type="selection"
        ></el-table-column>
        <el-table-column label="图片">
          <template #default="{ row }">
            <el-image
              :src="row.imgUrl"
              lazy
              style="width: 100px; height: 100px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button icon="Setting" type="primary" @click="setImgDefault(row)"
              >设置默认</el-button
            >
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addSkuInfo">保存</el-button>
      <el-button type="primary" @click="sceneValue = 1">取消</el-button>
    </el-form-item>
  </el-form>
</template>
